<template>
	<view class="search">
		<music-head title="搜索" :iconblack="true"></music-head>
		<view class="scroll-container" v-show="!isLoading">
			<scroll-view scroll-y="true">
				<view class="index-search">
          <view>
            <text class="iconfont icon-sousuo"></text>
            <input type="text" placeholder="搜索歌曲" v-model="searchWord" @confirm="handleToSearch(searchWord)" @input="handleToSuggest" />
						<text class="iconfont icon-close" v-show="iconClose" @click="handleToClear"></text>
          </view>
        </view>
				<template v-if="searchType === 1">
					<view class="search-history" v-if="searchHistory.length">
						<view class="search-history-head">
							<text>历史记录</text>
							<text class="iconfont icon-shanchu" @tap="handleToDelete"></text>
						</view>
						<view class="search-history-list">
							<view v-for="(item, index) in searchHistory" :key="index" @tap="handleToWord(item)">{{ item }}</view>
						</view>
					</view>
					<view class="search-hot">
						<view class="search-hot-head">热搜榜</view>
						<!-- <view class="search-hot-item">
							<view class="search-hot-top">1</view>
							<view class="search-hot-word">
								<view>少年<image src="/static/images/dujia.png" node="aspectFix"></image></view>
								<view>"少年"</view>
							</view>
							<text class="search-hot-count">2968644</text>
						</view> -->
						<view class="search-hot-item" v-for="(item, index) in searchHot" :key="index" @tap="handleToWord(item.searchWord)">
							<view class="search-hot-top">{{ index + 1 }}</view>
							<view class="search-hot-word overflow-hidden">
								<view>{{ item.searchWord }}<image v-if="item.iconUrl" :src="item.iconUrl" node="aspectFit"></image></view>
								<view class="truncate">{{ item.content }}</view>
							</view>
							<text class="search-hot-count">{{ item.score }}</text>
						</view>
					</view>
				</template>
				<template v-if="searchType === 2">
					<view class="search-result">
						<!-- <view class="search-result-item">
							<view class="search-result-word truncate">
								<view>少年</view>
								<view class="truncate">
									<image src="/static/images/dujia.png"></image>
									<image src="/static/images/sq.png"></image>
									<text>少年</text>
								</view>
							</view>
							<text class="iconfont icon-playCircle"></text>
						</view> -->
						<view class="search-result-item" v-for="item in searchList" :key="item.id" @tap="handleToDetail(item.id)">
							<view class="search-result-word truncate">
								<view>{{ item.name }}</view>
								<view class="truncate">
									<text>{{ item.artists.length ? item.artists[0].name + ' - ' : '' }}{{ item.album ? item.album.name : '' }}</text>
								</view>
							</view>
							<text class="iconfont icon-playCircle"></text>
						</view>
					</view>	
				</template>
				<template v-if="searchType === 3">
					<view class="search-suggest">
						<view class="search-suggest-head">搜索“{{ searchWord }}”</view>
						<view class="search-suggest-item" v-for="(item, index) in allMatch" :key="index" @tap="handleToWord(item.keyword)">
							<text class="iconfont icon-sousuo"></text>{{ item.keyword }}
						</view>
					</view>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import MusicHead from '@/components/musichead/musichead'
import { searchKeyWords, searchHotDetail, searchSuggest } from '@/common/api'
	export default {
		components: { MusicHead },
		data() {
			return {
				isLoading: true,
				iconClose: false,
				searchHot: [],
				searchWord: '',
				searchHistory: [],
				searchType: 1,
				searchList: [],
				allMatch: []
			}
		},
		onLoad() {
			this.isLoading = false
			this.getSearchHot()

			uni.getStorage({
				key: 'searchHistory',
				success: (res) => {
					this.searchHistory = res.data
				}
			});
		},
		methods: {
			async getSearchHot() {
				const res = await searchHotDetail()
				this.searchHot = res.data
			},
			handleToWord(word) {
				this.searchWord = word
				this.handleToSearch(word)
			},
			handleToSearch(word) {
				this.searchHistory.unshift(word)
				// 注意去重
				this.searchHistory = [...new Set(this.searchHistory)]
				// 注意显示长度
				if(this.searchHistory.length > 10) {
					// this.searchHistory = this.searchHistory.slice(0, 10)
					this.searchHistory.length = 10
				}

				uni.setStorage({
					key: 'searchHistory',
					data: this.searchHistory
				});

				this.getSearchList(word)
			},	
			handleToClear() {
				this.searchWord = ''
				this.searchType = 1
			},
			handleToDelete() {
				uni.removeStorage({
					key: 'searchHistory',
					success: (res) => {
						this.searchHistory = []
					}
				});
			},
			async getSearchList(word) {
				this.searchList = []
				this.searchType = 2
				let res = await searchKeyWords(word)
				this.searchList = res.result.songs
			},
			handleToDetail(id) {
				uni.navigateTo({
					url: '/pages/music-detail/music-detail?id=' + id
				});
			},
			async handleToSuggest(event) {
				let value = event.detail.value
				if(!value) {
					this.searchType = 1;
					return
				}
				let res = await searchSuggest(value)
				this.allMatch = res.result.allMatch
				this.searchType = 3
			}
		},
		watch: {
			searchWord(newVal, oldVal) {
				if(this.searchWord.trim()) {
					this.iconClose = true
				} else {
					this.iconClose = false
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.index-search {
  padding: 10rpx 30rpx 30rpx;
  >view {
    display: flex;
    align-items: center;
    background: #f7f7f7;
    height: 70rpx;
    border-radius: 35rpx;
    overflow: hidden;
  }
  .iconfont {
    font-size: 34rpx;
    margin-right: 18rpx;
    margin-left: 28rpx;
  }
  input {
    flex: 1;
    font-size: 26rpx;
  }
}
.search-history { margin: 0 30rpx 40rpx; }
.search-history-head { display: flex; justify-content: space-between; align-items: center; font-size: 28rpx; margin-bottom: 36rpx; }
.search-history-list { display: flex; flex-wrap: wrap; font-size: 26rpx; }
.search-history-list view { padding: 3rpx 26rpx; border-radius: 40rpx; margin-right: 30rpx; margin-bottom: 30rpx; background-color: #f7f7f7; }
.search-hot { margin: 0 30rpx; overflow: hidden; }
.search-hot-head { font-size: 28rpx; margin-bottom: 36rpx; }
.search-hot-item { display: flex; align-items: center; margin-bottom: 40rpx; }
.search-hot-top { color: #fb2222; width: 60rpx; margin-left: 8rpx; }
.search-hot-word { flex: 1; font-size: 30rpx; }
.search-hot-word view:nth-child(1) { font-size: 30rpx; }
.search-hot-word view:nth-child(2) { font-size: 24rpx; color: #878787; }
.search-hot-word image { width: 40rpx; height: 21rpx; margin-left: 10rpx; }
.search-hot-count { font-size: 24rpx; color: #878787; }
.search-result { border-top: 2px solid #e4e4e4; }
.search-result-item { display: flex; align-items: center; margin: 0 30rpx; padding: 20rpx 0;border-bottom: 2px solid #e4e4e4; overflow: hidden; }
.search-result-word { flex: 1; }
.search-result-word view:nth-child(1) { font-size: 28rpx; color: #235790; }
.search-result-word view:nth-child(2) text { font-size: 20rpx; color: #898989; }
.search-result-word view:nth-child(2) image { width: 53rpx; height: 32rpx; margin-right: 10rpx; }
.search-result-item .iconfont { font-size: 50rpx; color: #c7c7c7; margin-left: 10rpx; }
.search-suggest { padding: 24rpx 30rpx; font-size: 26rpx; border-top: 2px solid #e4e4e4; }
.search-suggest-head { margin-top: 20rpx; color: #235790; }
.search-suggest-item { padding: 24rpx 0; color: #5d5d5d }
.search-suggest-item text { font-size: 36rpx; color: #bdbdbd; margin-right: 20rpx; position: relative; top: 2px; }
</style>
 